<template>
    <el-dialog :visible.sync="modals" title="退款" class="order_box" v-dialogDrag :before-close="handleClose"
        width="1200px">

        <div v-for="(item, index) in backList" :key="index">
            <el-card>
                <el-row>
                    <el-col :span="10">
                        <!--  -->
                        <div>
                            <el-tag>购买的商品</el-tag>
                        </div>
                        <el-table :data="details" style="width: 100%">
                            <el-table-column prop="info.productName" label="商品名称">
                            </el-table-column>
                            <el-table-column prop="info.image" label="图片">
                                <template slot-scope="scope">
                                    <div class="demo-image__preview mr10">
                                        <el-image :src="scope.row.info.image" />
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="info.sku" label="规格">
                            </el-table-column>
                            <el-table-column prop="info.price" label="价格">
                            </el-table-column>
                            <el-table-column prop="info.sendNum" label="购买数量">
                            </el-table-column>
                        </el-table>

                    </el-col>
                    <el-col :span="14">
                        <div>
                            <el-tag>申请退款的商品</el-tag>
                        </div>

                        <div style="padding:20px">

                            <el-descriptions title="退款信息">
                                <el-descriptions-item label="退款价格：">{{ item.refundPrice }}</el-descriptions-item>
                                <el-descriptions-item label="退款原因：">{{ item.refundReasonWap }}</el-descriptions-item>
                                <el-descriptions-item
                                    label="退款状态：">{{ refundStatusDesc(item.refundStatus) }}</el-descriptions-item>
                                <el-descriptions-item label="退款时间：">{{ item.refundReasonTime }}</el-descriptions-item>

                            </el-descriptions>
                        </div>

                        <el-table :data="item.backDetails" style="width: 100%">
                            <el-table-column prop="productName" label="商品名称" width="180">
                            </el-table-column>
                            <el-table-column prop="image" label="图片">
                                <template slot-scope="scope">
                                    <div class="demo-image__preview mr10">
                                        <el-image :src="scope.row.image" />
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="sku" label="规格">
                            </el-table-column>
                            <el-table-column prop="backPrice" label="价格">
                            </el-table-column>
                            <el-table-column prop="backNum" label="退款数量">
                            </el-table-column>
                        </el-table>
                        <div style="text-align:center;margin-top:10px">
                            <el-row>
                                <el-button type="success">同意退款</el-button>
                                <el-button type="danger">拒绝退款</el-button>
                            </el-row>
                        </div>
                    </el-col>
                </el-row>
            </el-card>
        </div>

        <!-- <div slot="footer">
            <el-button type="primary" @click="putSend('formItem')">提交</el-button>
            <el-button @click="cancel('formItem')">取消</el-button>
        </div> -->
    </el-dialog>
</template>

<script>
import { getToken } from "@/utils/auth";
import { orderSendApi, sheetInfoApi, orderDetailApi, orderOcrExpress, orderRefundDetail } from '@/api/order'

import { checkPermi } from "@/utils/permission"; // 权限判断函数
import { Debounce } from '@/utils/validate'
const validatePhone = (rule, value, callback) => {
    if (!value) {
        return callback(new Error('请填写手机号'));
    } else if (!/^1[3456789]\d{9}$/.test(value)) {
        callback(new Error('手机号格式不正确!'));
    } else {
        callback();
    }
};
export default {
    name: 'orderSend',
    props: {
        orderId: String
    },
    data() {
        return {
            order: {},
            details: [],
            backList: [],
            btnloading: false,
            myHeaders: { "X-Token": getToken() },
            modals: false,
            expressType: 'normal'
        }
    },
    mounted() {
    },
    methods: {
        checkPermi,
        getDetail(row) {
            console.log(row);
            orderRefundDetail({ orderId: row.orderId }).then(res => {
                this.backList = res.backList

            }).catch(() => {

            })

            orderDetailApi({ orderNo: row.orderId }).then(res => {
                this.details = res.orderInfo
            })
        },
        refundStatusDesc(s) {
            // 0 未退款 1 申请中 2 已退款 3 退款中
            if (s == 0) {
                return '未退款'
            } else if (s == 1) {
                return '申请中'
            } else if (s == 2) {
                return '已退款'
            } else if (s == 3) {
                return '退款中'
            } 
            return "未知状态";
        },
        // 提交
        putSend: Debounce(function (name) {

        })
    }
}
</script>

<style scoped lang="scss">
.width8 {
    width: 80%;
}

.width9 {
    width: 70%;
}

.tempImgList {
    // opacity: 1;
    width: 38px !important;
    height: 30px !important;
    // margin-top: -30px;
    cursor: pointer;
    position: absolute;
    z-index: 11;

    img {
        width: 38px !important;
        height: 30px !important;
    }
}
</style>